/**
  * @description: g6--Fruchterman关系图
  * @author: hj
  * @update: hj(2020-01-14)
  */

import React, {Component} from 'react';
// import {Table} from '@alifd/next';
import G6 from '@antv/g6';
import styles from './index.module.scss';
import {getMediaById} from '@/service/Api/Chart';
import { observer,inject,Provider } from 'mobx-react';

let tableTimer;

 
@inject('chartStore') 
@observer

class FruchtermanGraph extends Component {
    constructor(props) {
        super(props);
        this.state = {
            params: [],
            data: [],
            forceFit: true, //forceFit自动试用宽度，默认false
            width: this.props.data.width ? this.props.data.width : '100%',   // 固定宽度    当自适应宽度开启，此功能失效
            height: this.props.data.height ? this.props.data.height: '100%',
            condition: this.props.data.condition ? this.props.data.condition : '',
            pageFlag: this.props.data.pageFlag ? this.props.data.pageFlag : '',
            nofirst: this.props.data.nofirst ? this.props.data.nofirst : '',
            color: this.props.data.color,
            title: '',
            chartId: this.props.data.chartId,
            id: this.props.data.componentId,

            // 菜单数据
            menuData: []
        };
    };


    componentWillMount() { //初始化
        const _this = this;
        
    }

    // 钩子函数--组件挂载完成后
    componentDidMount() { //初始化
        const _this = this;

        const data1 = {
            nodes: [{
              id: '0',
              label: '0',
              cluster: 'a'
            }, {
              id: '14',
              label: '14',
              cluster: 'b'
            }, {
              id: '30',
              label: '30',
              cluster: 'c'
            }, {
              id: '33',
              label: '33',
              cluster: 'd'
            }],
            edges: [{
              source: '0',
              target: '1'
            }]
          };

          const data = {
            nodes: [{
              id: '0',
              label: '0',
              cluster: 'a'
            }, {
              id: '1',
              label: '1',
              cluster: 'a'
            }, {
              id: '2',
              label: '2',
              cluster: 'a'
            }, {
              id: '3',
              label: '3',
              cluster: 'a'
            }, {
              id: '4',
              label: '4',
              cluster: 'a'
            }, {
              id: '5',
              label: '5',
              cluster: 'a'
            }, {
              id: '6',
              label: '6',
              cluster: 'a'
            }, {
              id: '7',
              label: '7',
              cluster: 'a'
            }, {
              id: '8',
              label: '8',
              cluster: 'a'
            }, {
              id: '9',
              label: '9',
              cluster: 'a'
            }, {
              id: '10',
              label: '10',
              cluster: 'a'
            }, {
              id: '11',
              label: '11',
              cluster: 'a'
            }, {
              id: '12',
              label: '12',
              cluster: 'a'
            }, {
              id: '13',
              label: '13',
              cluster: 'b'
            }, {
              id: '14',
              label: '14',
              cluster: 'b'
            }, {
              id: '15',
              label: '15',
              cluster: 'b'
            }, {
              id: '16',
              label: '16',
              cluster: 'b'
            }, {
              id: '17',
              label: '17',
              cluster: 'b'
            }, {
              id: '18',
              label: '18',
              cluster: 'c'
            }, {
              id: '19',
              label: '19',
              cluster: 'c'
            }, {
              id: '20',
              label: '20',
              cluster: 'c'
            }, {
              id: '21',
              label: '21',
              cluster: 'c'
            }, {
              id: '22',
              label: '22',
              cluster: 'c'
            }, {
              id: '23',
              label: '23',
              cluster: 'c'
            }, {
              id: '24',
              label: '24',
              cluster: 'c'
            }, {
              id: '25',
              label: '25',
              cluster: 'c'
            }, {
              id: '26',
              label: '26',
              cluster: 'c'
            }, {
              id: '27',
              label: '27',
              cluster: 'c'
            }, {
              id: '28',
              label: '28',
              cluster: 'c'
            }, {
              id: '29',
              label: '29',
              cluster: 'c'
            }, {
              id: '30',
              label: '30',
              cluster: 'c'
            }, {
              id: '31',
              label: '31',
              cluster: 'd'
            }, {
              id: '32',
              label: '32',
              cluster: 'd'
            }, {
              id: '33',
              label: '33',
              cluster: 'd'
            }],
            edges: [{
              source: '0',
              target: '1'
            }, {
              source: '0',
              target: '2'
            }, {
              source: '0',
              target: '3'
            }, {
              source: '0',
              target: '4'
            }, {
              source: '0',
              target: '5'
            }, {
              source: '0',
              target: '7'
            }, {
              source: '0',
              target: '8'
            }, {
              source: '0',
              target: '9'
            }, {
              source: '0',
              target: '10'
            }, {
              source: '0',
              target: '11'
            }, {
              source: '0',
              target: '13'
            }, {
              source: '0',
              target: '14'
            }, {
              source: '0',
              target: '15'
            }, {
              source: '0',
              target: '16'
            }, {
              source: '2',
              target: '3'
            }, {
              source: '4',
              target: '5'
            }, {
              source: '4',
              target: '6'
            }, {
              source: '5',
              target: '6'
            }, {
              source: '7',
              target: '13'
            }, {
              source: '8',
              target: '14'
            }, {
              source: '9',
              target: '10'
            }, {
              source: '10',
              target: '22'
            }, {
              source: '10',
              target: '14'
            }, {
              source: '10',
              target: '12'
            }, {
              source: '10',
              target: '24'
            }, {
              source: '10',
              target: '21'
            }, {
              source: '10',
              target: '20'
            }, {
              source: '11',
              target: '24'
            }, {
              source: '11',
              target: '22'
            }, {
              source: '11',
              target: '14'
            }, {
              source: '12',
              target: '13'
            }, {
              source: '16',
              target: '17'
            }, {
              source: '16',
              target: '18'
            }, {
              source: '16',
              target: '21'
            }, {
              source: '16',
              target: '22'
            }, {
              source: '17',
              target: '18'
            }, {
              source: '17',
              target: '20'
            }, {
              source: '18',
              target: '19'
            }, {
              source: '19',
              target: '20'
            }, {
              source: '19',
              target: '33'
            }, {
              source: '19',
              target: '22'
            }, {
              source: '19',
              target: '23'
            }, {
              source: '20',
              target: '21'
            }, {
              source: '21',
              target: '22'
            }, {
              source: '22',
              target: '24'
            }, {
              source: '22',
              target: '25'
            }, {
              source: '22',
              target: '26'
            }, {
              source: '22',
              target: '23'
            }, {
              source: '22',
              target: '28'
            }, {
              source: '22',
              target: '30'
            }, {
              source: '22',
              target: '31'
            }, {
              source: '22',
              target: '32'
            }, {
              source: '22',
              target: '33'
            }, {
              source: '23',
              target: '28'
            }, {
              source: '23',
              target: '27'
            }, {
              source: '23',
              target: '29'
            }, {
              source: '23',
              target: '30'
            }, {
              source: '23',
              target: '31'
            }, {
              source: '23',
              target: '33'
            }, {
              source: '32',
              target: '33'
            }]
          };
          
          
        const colors = [ '#BDD2FD', '#BDEFDB', '#C2C8D5', '#FBE5A2', '#F6C3B7', '#B6E3F5', '#D3C6EA', '#FFD8B8', '#AAD8D8', '#FFD6E7' ];
        const strokes = [ '#5B8FF9', '#5AD8A6', '#5D7092', '#F6BD16', '#E8684A', '#6DC8EC', '#9270CA', '#FF9D4D', '#269A99', '#FF99C3' ];
        
        const nodes = data.nodes;
        const clusterMap = new Map();
        let clusterId = 0;
        nodes.forEach(function(node) {
            // cluster
            if (node.cluster && clusterMap.get(node.cluster) === undefined) {
                clusterMap.set(node.cluster, clusterId);
                clusterId++;
            }
            const cid = clusterMap.get(node.cluster);
            if (!node.style) {
                node.style = {};
            }
            node.size = 40;
            node.style.fill = colors[cid % colors.length];
            node.style.stroke = strokes[cid % strokes.length];
        });
        console.log('nodes---',nodes);
        const graphDiv = document.getElementById('chart_'+this.state.id+'_'+this.state.chartId);
        const width = graphDiv.scrollWidth;
        const height = graphDiv.scrollHeight - 30;
        const graph = new G6.Graph({
            container: 'chart_'+this.state.id+'_'+this.state.chartId,
            width,
            height,
            modes: {
                default: [ 'drag-canvas', 'drag-node', 'zoom-canvas' ]
            },
            layout: {
                type: 'fruchterman',
                gravity: 1,
                speed: 5
            },
            animate: true,
            defaultNode: {
                // size: 30,
                style: {
                    lineWidth: 2
                }
            },
            defaultEdge: {
                size: 1,
                color: '#e2e2e2',
                style: {
                    endArrow: {
                        path: 'M 4,0 L -4,-4 L -4,4 Z',
                        d: 4
                    }
                }
            }
        });
        graph.data(data);
        graph.render();
        
        layoutConfigTranslation();
          
        function layoutConfigTranslation() {
            setTimeout(function() {
                graph.updateLayout({
                    gravity: 5
                });
            }, 1000);
          
            setTimeout(function() {
                graph.updateLayout({
                    gravity: 10,
                    clustering: true
                });
            }, 2500);
          
            setTimeout(function() {
                graph.updateLayout({
                    gravity: 20
                });
            }, 4000);
        }
    }
    // 接收父组件的数据改变
    componentWillReceiveProps = (nextProps) => {
        const _this = this;
        
    }
    



    render() {
        const _this = this;
        let Layer = this.props.layer;

        return (
            
            <div id={this.state.id+'_'+this.state.chartId} style={{zIndex: 9999,width: this.state.width,height: this.state.height,padding: '40px 2% 20px 2%'}}>
                <Layer width={this.state.width}></Layer>
                <div id={'chart_'+this.state.id+'_'+this.state.chartId} style={{height: this.state.height-60,brder: '1px solid red'}}></div>
            </div>
        );
    }


}

export default FruchtermanGraph;

